<template>
  <button type="button" class="ant-switch" :class="{ 'ant-switch-checked': checked }" @click="changeSwitch">
    <div class="ant-switch-handle"></div>
    <span class="ant-switch-inner"></span>
  </button>
</template>

<script setup>
const _props = defineProps({
  checked: {
    type: Boolean,
    default: false,
  },
})
const _emits = defineEmits(['update:checked'])
const changeSwitch = (e) => {
  _emits('update:checked', !_props.checked)
}
</script>

<style lang="less" scoped>
.ant-switch {
  margin: 0;
  padding: 0;
  color: #000000d9;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: 'tnum';
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: 44px;
  height: 22px;
  line-height: 22px;
  vertical-align: middle;
  background-color: #00000040;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.ant-switch-checked {
  background-color: var(--print-primary-color);
  .ant-switch-handle {
    left: calc(100% - 20px);
  }
  .ant-switch-checked .ant-switch-inner {
    margin: 0 25px 0 7px;
  }
}
.ant-switch-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  transition: all 0.2s ease-in-out;
}

.ant-switch-inner {
  display: block;
  margin: 0 7px 0 25px;
  color: #fff;
  font-size: 12px;
  transition: margin 0.2s;
}
.ant-switch-handle:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-radius: 9px;
  box-shadow: 0 2px 4px #00230b33;
  transition: all 0.2s ease-in-out;
  content: '';
}
</style>
